<template>
  <view class="bind-email">
    <!-- 返回按钮 -->
    <tn-button 
      backgroundColor="tn-bg-left" 
      style="color: black; position: absolute; left: 5%; top: 10%; width: 35px; height: 35px; font-size: 25px;" 
      :border="false" 
      @click="handleReturn"
    >
      <text class="tn-icon-left"></text>
    </tn-button>

    <!-- 页面标题 -->
    <view class="page-title">绑定邮箱</view>

    <!-- 绑定邮箱表单 -->
    <view class="form-container">
      <tn-input 
        v-model="email" 
        placeholder="请输入邮箱地址" 
        type="text" 
        :clearable="true"
      ></tn-input>

      <view class="verification-code-container">
        <tn-input 
          v-model="verificationCode" 
          placeholder="请输入验证码" 
          type="text" 
          :clearable="true"
          style="width: 60%;"
        ></tn-input>
        <tn-button 
          backgroundColor="tn-bg-blue" 
          style="color: white; width: 35%; height: 40px; font-size: 16px;" 
          :border="false" 
          @click="sendVerificationCode"
          :disabled="!canSendCode"
        >
          {{ codeButtonText }}
        </tn-button>
      </view>

      <tn-button 
        backgroundColor="tn-bg-green" 
        style="color: white; width: 100%; height: 45px; font-size: 18px; margin-top: 20px;" 
        :border="false" 
        @click="bindEmail"
        :disabled="!canBind"
      >
        绑定邮箱
      </tn-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      verificationCode: '',
      codeButtonText: '获取验证码',
      canSendCode: true,
      countdown: 60,
    };
  },
  computed: {
    canBind() {
      return this.email && this.verificationCode;
    }
  },
  methods: {
    // 返回上一页
    handleReturn() {
      uni.navigateBack({ delta: 1 });
    },
    // 发送验证码
    sendVerificationCode() {
      if (!this.email) {
        uni.showToast({
          title: '请输入邮箱地址',
          icon: 'none'
        });
        return;
      }
      this.canSendCode = false;
      this.startCountdown();
      // 模拟发送验证码
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      });
    },
    // 开始倒计时
    startCountdown() {
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown -= 1;
          this.codeButtonText = `${this.countdown}秒后重试`;
        } else {
          clearInterval(timer);
          this.codeButtonText = '获取验证码';
          this.canSendCode = true;
          this.countdown = 60;
        }
      }, 1000);
    },
    // 绑定邮箱
    bindEmail() {
      if (!this.email || !this.verificationCode) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      // 模拟绑定邮箱
      uni.showToast({
        title: '邮箱绑定成功',
        icon: 'success'
      });
      setTimeout(() => {
        uni.navigateBack({ delta: 1 });
      }, 1500);
    }
  }
};
</script>

<style scoped>
.bind-email {
  padding: 20px;
  background-color: #f5f5f5; /* 轻微灰色背景 */
  height: 100%;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  color: #333;
  letter-spacing: 1px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

.form-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 40px;
}

.verification-code-container {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

tn-input {
  width: 100%;
  margin-top: 15px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

tn-button {
  height: 40px;
  font-size: 16px;
  font-family: "宋体", SimSun, sans-serif; /* 修改字体为宋体 */
}

tn-button:active {
  background-color: #d0d0d0;
}
</style>